<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/biaodan.css"/>
	</head>
	<body>
		<div id="box">
			<div id="redLine"></div>
			<div id="nav">
				<p>收货信息</p>
				<p>×</p>
			</div>
			<div id="content">
				<div id="cooKie">
					<div class="kong"></div>
					<div class="cookies">
						<div class="fang"></div>
						<p class="name">洋葱</p>
						<p class="area">北京市海淀区北四环彩和坊路6号 朔黄发展大厦8号</p>
					</div>
					<div class="cookies">
						<div class="fang"></div>
						<p class="name">大蒜</p>
						<p class="area">北京市海淀区北四环西路 理想国际大厦</p>
					</div>
				</div>
				<div id="adress">
					<p>+</p>
					<p>新增收货地址</p>
				</div>
				<form action="" method="post">
					<span class="xingming">姓名 : </span><input type="text" name="" id="name1" value="" />
					<br />
					<span>地区 : </span><input type="text" name="" id="areaOne" value="" />
					<input type="text" name="name" id="areaTwo" value=""/>
					<br />
					<span>地址 : </span><input type="text" name="" id="adre" value="" />
					<br />
					<span>邮件 : </span><input type="text" name="" id="e-mail" value="" />
					<br />
					<span>手机 : </span><input type="text" name="" id="phone" value="" />
					<br />
					<div id="moren">
						<div id="xiaofang"></div>
						<p>设为默认地址</p>
					</div>
				</form>
			</div>
			<div id="bottom">
				<div id="next" class="xia">下一步</div>
				<div id="quxiao" class="qu">取消</div>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		var name1 = document.getElementById("name1");
		var cookieAll = document.getElementById("cooKie");
		var areaOne = document.getElementById("areaOne");
		var areaTwo = document.getElementById("areaTwo");
		var adre = document.getElementById("adre");
		var eMail = document.getElementById("e-mail");
		var phone = document.getElementById("phone");
		var next = document.getElementById("next");
		var dele = document.getElementById("quxiao"); 
		var content = document.getElementById("content");
		var box = document.getElementById("box");
		var smallFang = document.getElementById("xiaofang");
		var input = document.getElementsByTagName("input");
		var cookie = [];
		var i = 0;
		var reOne = /^[\u4e00-\u9fa5]{2,}$/;
		setInterval(function(){
			var fang = document.getElementsByClassName("fang");
			for(var j = 0;j <fang.length;j++){
				fang[j].index = j;
				fang[j].onclick = function(){
					for(var k = 0;k < fang.length;k++){
						fang[k].style.background = "";
						fang[k].style.borderColor = "";
					}
					this.style.background = "blue";
					this.style.borderColor = "blue";
				}
			}
			
		},30)
		function xiayibu(){
			if(name1.value == "" || areaOne.value == "" || areaTwo.value == "" || adre.value == "" || eMail.value == "" || phone.value == ""){
				alert("请检查清楚啊，不要瞎点");
			}else{
				addAdress()
			}
		}
		function addAdress(){
			var haha = content.offsetHeight;
			var hehe = box.offsetHeight;
			content.style.height = haha + 68 + "px";
			box.style.height = hehe + 64 + "px";
			cookie[i] = {name:name1.value,area:areaOne.value + areaTwo.value + " " + adre.value,eMail1:eMail.value,phone1:phone.value};
			addAdre(i);
			i++;
		}
		next.addEventListener("click",xiayibu,false)
		function addAdre(i){
			var cookieT = document.createElement("div");
			cookieT.className = "cookies";
			var fang = document.createElement("div")	;
			fang.className = "fang";
			var 	p1 = document.createElement("p");
			p1.className = "name";
			p1.innerHTML = cookie[i].name;
			var p2 = document.createElement("p");
			p2.className = "area";
			p2.innerHTML = cookie[i].area;
			var br = document.createElement("br");
			var p3 = document.createElement("p");
			p3.className = "areaA";
			p3.innerHTML = cookie[i].eMail1;
			var p4 = document.createElement("p");
			p4.className = "areaB";
			p4.innerHTML = cookie[i].phone1;
			cookieT.appendChild(fang);
			cookieT.appendChild(p1);
			cookieT.appendChild(p2);
			cookieT.appendChild(br);
			cookieT.appendChild(p3);
			cookieT.appendChild(p4);
			cookieAll.appendChild(cookieT);
		}
	</script>
</html>